<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cmd_webgl_study2</title>
</head>
<body>

    <!--    1.创建webgl标签 
            2.得到canvas element
            3.得到上下文对象 context
            4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标）            
            5.片元着色器源代码：描述一个点的颜色
            6.创建着色器对象
            7.把source导入着色器对象
            8.对着色器对象进行编译compile
            9.创建一个program,webgl分两个运行部分，一个是js环境，另一个是webgl内部硬件运行部分。着色器代码运行在内部。
            10.把着色器附着在program上。
            11.链接program
            12.使用program
            13.设置背景色
            14.绘制
    -->

    <!-- 1.创建webgl标签 -->
    <canvas id="webgl" width="500" height="500"></canvas>
    <script type="shader" id="vertex">
        attribute vec4 apos;
        void main(){
            gl_PointSize = 20.0;
            gl_Position = apos;
        }
    </script>
    <script type="shader" id="fragment">
        void main(){
            gl_FragColor = vec4(0.0,1.0,0.0,1.0);
        }
    </script>
    <script src="./libs/webgl_libs.js"></script>
    <script>
        // 2.得到canvas element
        let canvas = document.getElementById('webgl');
        // 3.得到上下文对象 context
        let gl = canvas.getContext('webgl');

        //4.编写顶点着色器源代码、实际绘制的代码，GPU：描述一个顶点的大小、位置（3d坐标） 顶点着色器
        let vertex_shader_source = document.getElementById("vertex").innerHTML;

        //5.片元着色器源代码：描述一个点的颜色 片元着色器
        let fragment_shader_source = document.getElementById("fragment").innerHTML;



        let program = create_program(gl,vertex_shader_source,fragment_shader_source);
        console.log('program:',program);

        gl.getAttribLocation(program,'apos')
        let apos = gl.getAttribLocation(program,'apos');
        let x1 = 0.5;
        let x2 = -0.5;
        let how = true;
        setInterval(()=>{
            how = !how;
            if(how == true)
            {
                gl.vertexAttrib1f(apos,x1);
            }
            else
            {
                gl.vertexAttrib1f(apos,x2);
            }
            // 13.设置背景色
            gl.clearColor(1.0,0.0,0.0,1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            // 14.绘制
            gl.drawArrays(gl.POINTS,0,1);
        },1000)
    </script>
</body>
</html>